<template>
    <div class="showBox" v-if="show"  @click="fun()">
        <div class="box" v-if="show" :style="{}">
            <h1>我是弹框</h1>
            <p class="dele" @click="fun()">x</p>
        </div>
    </div>
</template>
<script>

export default ({
   name:'project',
    data(){
        return {
            show:false
        }
    },
    methods:{
        fun1(){
            this.show = true;
        },
        fun(){
            this.show = false;
        },
    }
})
</script>
<style>
    .box{
       width: 500px;
       height: 300px;
       margin: 20px auto;
       border: 1px solid #cdcdcd;
       background: #fff;
       position: fixed;
       top:30%;
       left: 30%;
       z-index:99;
    }
    .dele{
        position: absolute;
        right: 20px;
        top: -20px;
        font-size: 26px;
    }
    .show{
        width: 100%;
        height: 700px;
        margin: auto;
        text-align: center;
        background: #fff;
        float: left;
    }
    .showBox{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, .6);
}
</style>
